<div class="card-wrap">
  <mat-card>
    <!--card header-->
    <mat-card-header>
      <mat-card-title>注 册</mat-card-title>
    </mat-card-header>

    <!--card content-->
    <mat-card-content>
      <mat-form-field class="full-width">
        <input matInput placeholder="请输入您的email" required>
      </mat-form-field>
      <mat-form-field class="full-width">
        <input matInput placeholder="您的姓名" required>
      </mat-form-field>
      <mat-form-field class="full-width">
        <input matInput placeholder="请输入您的密码" required>
      </mat-form-field>
      <mat-form-field class="full-width">
        <input matInput placeholder="再次输入您的密码" required>
      </mat-form-field>
      <mat-grid-list cols="5" rowHeight="1:1">
        <mat-grid-tile *ngFor="let avatar of avatarIcons">
          <mat-icon aria-hidden="true" [svgIcon]="avatar"></mat-icon>
        </mat-grid-tile>
      </mat-grid-list>
      <button mat-raised-button>注册</button>
    </mat-card-content>

    <!--card actions-->
    <mat-card-actions class="text-right">
      <p>已有账户？<a routerLink="/login">返回登录</a></p>
    </mat-card-actions>
  </mat-card>

</div>



